import { Navigate } from "react-router-dom";
import React, { lazy, Suspense } from "react";
import { Spin } from "antd";
import CarouselMap from "@/views/home/normal/carouselMap";
import CardHover from "@/views/home/fun/cardHover";
import { QrCode } from "@/views/home/fun/qrCode";
import { LineChart } from "@/views/home/echarts/lineChart";
import { LineChart3d } from "@/views/home/echarts/lineChart3d";
import { ContrastColor } from "@/views/home/css/contrastColor";
import { GradientBorder } from "@/views/home/css/gradientBorder";
import { HollowOut } from "@/views/home/css/hollowOut";
import { ReduxLearn } from "@/views/home/normal/reduxLearn";
import { NotFound } from "@/views/404";
import { VoiceBroadcast } from "@/views/home/normal/voiceBroadcast";
import { TokenRefresh } from "@/views/home/normal/tokenRefresh";
import { BorderHighlight } from "@/views/home/css/borderHighlight";
import { Monitoring } from "@/views/home/normal/monitoring";
import { ReadAndSaveFile } from "@/views/home/normal/readAndSaveFile";
import { Hardware } from "@/views/home/fun/hardware";
import { Cube } from "@/views/home/fun/cube";
import { Communication } from "@/views/home/normal/communication";
import { RequestAnimationFrameComp } from "@/views/home/normal/requestAnimationFrame";
import WaterMark from "@/views/home/normal/watermark";
// 懒加载函数
const lazyLoad = (
  factory: () => Promise<{ default: React.ComponentType<any> }>,
) => {
  const Module = lazy(factory);

  return (
    <Suspense fallback={<Spin size="large" fullscreen tip="努力加载中" />}>
      <Module />
    </Suspense>
  );
};

export const UserLevel = {
  ROOT_ADMIN: 3,
  ADMIN: 2,
  访客: 1,
};
export const UserLevelName = {
  [UserLevel.ROOT_ADMIN]: "超级管理员",
  [UserLevel.ADMIN]: "管理员",
  [UserLevel.访客]: "访客",
};

export interface IRouteObject {
  children?: IRouteObject[];
  element?: React.ReactNode;
  index?: boolean;
  path?: string;
  meta?: {
    auth?: boolean;
    role?: number;
  };
}

const baseRouter: Array<IRouteObject> = [
  {
    path: "/",
    element: <Navigate to="/home/carouselMap" />,
  },
  {
    path: "/home",
    element: lazyLoad(() => import("@/views/home")),
    children: [
      {
        path: "carouselMap",
        element: <CarouselMap />,
        meta: {
          role: UserLevel["访客"],
        },
      },
      {
        path: "learn",
        children: [
          {
            path: "WaterMark",
            element: <WaterMark />,
            meta: {
              role: UserLevel["ADMIN"],
            },
          },
          {
            path: "requestAnimationFrame",
            element: <RequestAnimationFrameComp />,
            meta: {
              role: UserLevel["ADMIN"],
            },
          },
          {
            path: "communication",
            element: <Communication />,
            meta: {
              role: UserLevel["ADMIN"],
            },
          },
          {
            path: "readAndSaveFile",
            element: <ReadAndSaveFile />,
            meta: {
              role: UserLevel["ADMIN"],
            },
          },
          {
            path: "monitoring",
            element: <Monitoring />,
            meta: {
              role: UserLevel["ADMIN"],
            },
          },
          {
            path: "reduxLearn",
            element: <ReduxLearn />,
            meta: {
              role: UserLevel["ADMIN"],
            },
          },
          {
            path: "voiceBroadcast",
            element: <VoiceBroadcast />,
            meta: {
              role: UserLevel["ADMIN"],
            },
          },
          {
            path: "/home/learn/tokenRefresh",
            element: <TokenRefresh />,
            meta: {
              role: UserLevel["ADMIN"],
            },
          },
        ],
      },
      {
        path: "fun",
        children: [
          {
            path: "hardware",
            element: <Hardware />,
            meta: {
              role: UserLevel["ADMIN"],
            },
          },
          {
            path: "cardHover",
            element: <CardHover />,
            meta: {
              role: UserLevel["ADMIN"],
            },
          },
          {
            path: "qrCode",
            element: <QrCode />,
            meta: {
              role: UserLevel["ADMIN"],
            },
          },
          {
            path: "cube",
            element: <Cube />,
            meta: {
              role: UserLevel["ADMIN"],
            },
          },
        ],
      },
      {
        path: "css",
        children: [
          {
            path: "borderHighlight",
            element: <BorderHighlight />,
            meta: {
              role: UserLevel["ADMIN"],
            },
          },
          {
            path: "contrastColor",
            element: <ContrastColor />,
            meta: {
              role: UserLevel["ADMIN"],
            },
          },
          {
            path: "gradientBorder",
            element: <GradientBorder />,
            meta: {
              role: UserLevel["ADMIN"],
            },
          },
          {
            path: "hollowOut",
            element: <HollowOut />,
            meta: {
              role: UserLevel["ADMIN"],
            },
          },
        ],
      },
      {
        path: "echarts",
        children: [
          {
            path: "lineChart",
            element: <LineChart />,
            meta: {
              role: UserLevel["ADMIN"],
            },
          },
          {
            path: "3dLineChart",
            element: <LineChart3d />,
            meta: {
              role: UserLevel["ADMIN"],
            },
          },
        ],
      },
    ],
  },
  {
    path: "*",
    element: <NotFound />,
  },
];

export { baseRouter };
